<template>
  <div id="bg-wrap">
    <div id="home">
      <div class="logo-wrap" @click="handleClickLogo">
        <img src="../../assets/logo.png" alt="guat logo">
      </div>
      <div class="home">
        <h1 class="title">
          本科优秀学位论文库
        </h1>
        <h6 class="sub-title">Outstanding Graduation Dissertation Library</h6>
        <el-autocomplete
          class="search"
          popper-class="popper"
          v-model="value"
          :fetch-suggestions="querySearch"
          placeholder="请输入标题或内容"
          :debounce="300"
          @select="handleClickItem"
          autofocus
          :trigger-on-focus="false"
          select-when-unmatched
        >
          <template slot-scope="{ item }">
            <span v-html="item"></span>
          </template>
          <div slot="suffix" class="search-btn" @click="handleSearch">
            搜索
            <i class="el-icon-search"></i>
          </div>
        </el-autocomplete>
        
      </div>
    <copyright class="bottom-layer" />
    </div>
  </div>
</template>

<script>
import { searchTitle } from "../../api/v1/paperSearch";
export default {
  name: "Home",
  data() {
    return {
      value: "",
      searchList: [],
      pageIndex: 1,
      total: 0
    };
  },
  methods: {
    handleClickLogo() {
      window.open('https://www.guat.edu.cn', '_blank')
    },
    handleSearch() {
      this.handleClickItem(this.value)
    },
    querySearch(queryString, cb) {
      if (queryString === "" || queryString === undefined || queryString === null) {
        this.searchList = [];
        cb([])
        return;
      }
      searchTitle(queryString).then((res) => {
        if (res.status === 200 && Array.isArray(res.data)) {
          this.searchList = res.data;
          cb(this.searchList)
        }
      }).catch(e => {
        console.log(e)
      })
    },
    handleClickItem(value) {
      if(typeof value === 'object') {
        value = value.value
      }
      const str = value.replace(/<\/?.+?\/?>/g, '')
      this.value = str
      this.$router.push({ path: '/result', query: { search: str } })
    },
  }
};
</script>

<style>
/* @import "../../assets/css/grid.css"; */
#bg-wrap .search-btn {
  width: 100px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  border-left: 1px solid #dfe1e5;
  background-color: #0d4589;
  border-radius: 0 20px 20px 0;
  margin-right: -7px;
}
#bg-wrap {
  width: 100%;
  height: 100vh;
  background: url('../../assets/bg.jpg') no-repeat center center;
  background-size: cover;
}

#bg-wrap .bottom-layer {
  bottom: 40px;
  background-color: transparent;
}

#home {
  position: relative;
  background-color: rgba(0,0,0,.62);
  z-index: 1;
  width: 100%;
  height: 100%;
}

#home .home {
  position: relative;
  margin: 0 auto;
  padding-top: 30vh;
  height: 100%;
}

#home .home .title {
  text-align: center;
  color: rgb(204, 204, 204);
  /* color: #0d4589; */
  user-select: none;
  letter-spacing: .15em;
  font-size: 56px;
  font-family: '宋体';
  font-weight: 400;
  margin-bottom: 0;
}

#home .home .sub-title {
  text-align: center;
  padding: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  color: rgb(204, 204, 204);
  letter-spacing: .23em;
  word-spacing: 8px;
  font-family: 'Times New Roman';
  margin-bottom: 20px;
}

#home .logo-wrap {
  position: absolute;
  width: 20%;
  top: 20px;
  left: 20px;
  cursor: pointer;
}

#home .logo-wrap img {
  width: 100%;
  height: 100%;
}

#home .home > .search {
  position: relative;
  width: 60%;
  height: 100px;
  left: 50%;
  margin-left: -30%;
  margin-top: 20px;
}
#home .home > .search .el-input .el-input__inner {
  border-radius: 20px;
  box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
  border-color: rgba(223,225,229,0);
}

#home .home .page {
  margin-bottom: 50px;
}


</style>
